<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>纯css的视差动画</title>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="base.css">
  <link rel="stylesheet" href="common.css">
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #container{
      width: 100vw;
      height: auto;
    }
    .tou{
      height: 680px;
      background-color: #c4cbcf;
      color: #fff;
      font-size: 20vh;
      display: block;
      text-align: center;
    }
    .img{
      background-size: auto;
      background-position: center;
      overflow: hidden;
      background-attachment: fixed;
      background-repeat: no-repeat;
      max-width: 100%;
      user-select: none;
      cursor: default;
    }
    #img2{
      background-image: url(img/background2.png);
    }
    #img3{
      background-image: url(img/back.jpg);
    }
    .height{
      height: 250px;
    }
    .mid-info{
      margin-top: 37px;
      margin-right: 80px;
      display: flex;
      left: 0;
      margin-left: 60px;
      background-color:#edf5f0;
    }
    .mid-menu{
      width: 50%;
      display: flex;
       background-color: #edf5f0;
      height: auto;
      margin-top: 40px;
      justify-content: center;
    }
    .mid{
      background-color: #edf5f0;
      flex-direction:row;
      display: flex;
    }
    .mid-info h2{
      width: 450px;
      margin-top: 30px;
    }
    .mid-info h2 img{
      width: 100%;
      height: auto;
    }
    .mid-menu ul {
      padding-right: 30px;
      box-sizing: border-box;
      margin-left: 20px;
    }
    .mid-menu ul li:first-child {
      margin-bottom: 40px;
      color: #58755d;
      opacity: 1;
      font-size: 19px;
    }
    .mid-menu ul li {
      color: #58755d;
      margin-bottom: 18px;
      font-size: 18px;
      letter-spacing: .01em;
    }
    .mid-menu ul li a {
      position: relative;
      display: inline-block;
      transform: translateZ(0);
      line-height: 100%;
    }
    .mid-menu ul li .line{
      display: none;
    }
    video{
      width: 100%;
      height: 100%;
    }
    .shortcut{
      position: absolute;
      opacity: 60%;
      color: rgb(255,255,255);
      z-index: 999;
      background:linear-gradient(360deg,rgba(18,18,18,0) 0%,rgb(18,18,18) 100%);
    }
    .wrapper{
      width: 1472px;
    }
    .shortcut .wrapper li {
    }
    .shortcut .wrapper a{
      color: white;
    }
  </style>
</head>
<body>
<div class="shortcut">
  <div class="wrapper">
    <ul>
      <li><a href="登录login.html" id="top">您好！请先登录</a></li>
      <li><a href="注册导航.html">免费注册</a></li>
      <li><a href="index.html">主页</a></li>
      <li><a href="ShopCar.html">购物车</a></li>
      <li><a href="#">收货中心</a></li>
      <li><a href="homePage.html">个人中心</a></li>
      <li><a href="视觉介绍.html"><span></span>官网</a></li>
    </ul>
  </div>
</div>
<div id="container">
  <div id="content1" class="tou">
    <div class="cont">
      <video src="https://uxresources.baozun.com/prod/88000060/20230223/5BB75C9E1A8B778E3414B0FADECD0FAF.mp4"  poster="https://uxresources.baozun.com/prod/88000060/20230223/E02971403295338468EED24A90CC38DF.jpg" autoplay="autoplay"  loop="loop" preload="auto"></video>
    </div>
  </div>
  <div id="img2" class="img tou" ></div>
  <div id="content2" class="tou mid">
    <section class="mid-info">
      <h2>
        <img src="img/letsmakehappy.png">
      </h2>
    </section>
    <section class="mid-menu">
      <ul>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Architecture</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Offices</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Coworking</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Retail</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Hospitality</span>
          </span>
        </li>
      </ul>
      <ul>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Expertise</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Expertise</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Architecture</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Interior Design</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Workplace Consultancy</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Research & Development</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Sustainability</span>
          </span>
        </li>
      </ul>
      <ul>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">News&Stories</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Awards</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Media</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Topics</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Projects</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line">----</span>
          <span class="label">
            <span class="font">Investors</span>
          </span>
        </li>
      </ul>
      <ul>
        <li>
          <a href="#"></a>
          <span class="line"></span>
          <span class="label">
            <span class="font">Company</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line"></span>
          <span class="label">
            <span class="font">About</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line"></span>
          <span class="label">
            <span class="font">Careers</span>
          </span>
        </li>
        <li>
          <a href="#"></a>
          <span class="line"></span>
          <span class="label">
            <span class="font">Contact</span>
          </span>
        </li>
      </ul>
    </section>
  </div>
  <div id="img3" class="img tou"></div>
  <div id="footer" class="tou height">
    <div class="footer ">
      <div class="wrapper">
        <div class="top">
          <ul>
            <li>
              <span>快乐购物</span>
            </li>
            <li>
              <span>分享乐趣</span>
            </li>
            <li>
              <span>收获折扣</span>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <p>
            <a href="#">关于我们</a> |
            <a href="#">关于我们</a> |
            <a href="#">关于我们</a> |
            <a href="#">关于我们</a> |
            <a href="#">关于我们</a> |
            <a href="#">关于我们</a> |
            <a href="#">关于我们</a>
          </p>
          <p>CMY @ </p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  const ShopCar=document.querySelector('.wrapper li:nth-child(4) a')
  ShopCar.addEventListener('click',function (e){
    e.preventDefault()
    alert('请先登录')
  })
</script>
</body>
</html>